<template>
  <div style="overflow:hidden">
    <router-view v-slot="{ Component }">
    <transition name="slide-fade" mode="out-in">
      <!-- 使用keep-alive缓存组件内容 -->
      <keep-alive>
        <component :is="Component" :key="$route.meta.title" v-if="$route.meta.keepAlive" />
      </keep-alive>
    </transition>
    <transition name="slide-fade" mode="out-in">
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </transition>
  </router-view>
  </div>
  <!-- <h1>二级运营路由</h1> -->
  <!-- <Router-view /> -->
</template>



<script>
// import page from "../router/page";
// export default {
//   data() {
//     return {
//       page,
//     };

//   },
// };
</script>
<style type="text/css" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  /**进入动画*/
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  /**离开动画*/
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
/**页面进入样式*/
.slide-fade-enter-to {
  transform: translateX(0px); /**向右平移50px*/
  opacity: 1;
}
/**页面退出样式*/
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-50px); /**向右平移50px*/
  opacity: 0;
}
</style>
